.wf-input{
  --wf-input-text-color:var(--wf-text-color-regular);
  --wf-input-border:var(--wf-border);
  --wf-input-hover-border:var(--wf-border-color-hover);
  --wf-input-focus-border:var(--wf-color-primary);
  --wf-input-transparent-border:0 0 0 1px transparent inset;
  --wf-input-border-color:var(--wf-border-color);
  --wf-input-border-radius:var(--wf-border-radius-base);
  --wf-input-bg-color:var(--wf-fill-color-blank);
  --wf-input-icon-color:var(--wf-text-color-placeholder);
  --wf-input-placeholder-color:var(--wf-text-color-placeholder);
  --wf-input-hover-border-color:var(--wf-border-color-hover);
  --wf-input-clear-hover-color:var(--wf-text-color-secondary);
  --wf-input-focus-border-color:var(--wf-color-primary);
}
.wf-input{
  --wf-input-height:var(--wf-component-size);
  position: relative;
  font-size: var(--wf-font-size-base);
  display: inline-flex;
  width: 100%;
  line-height: var(--wf-input-height);
  box-sizing: border-box;
  vertical-align: middle;
  &.is-disabled{
    cursor: not-allowed;
    .wf-input_wrapper{
      background-color: var(--wf-disabled-bg-color);
      box-shadow:  0 0 0 1px var(--wf-disabled-border-color) inset;
    }
    .wf-input_inner{
      color: var(--wf-disabled-text-color);
      -webkit-text-fill-color:var(--wf-disabled-text-color);
      cursor: not-allowed;
    }
    .wf-textarea_inner{
      background-color: var(--wf-disabled-bg-color);
      box-shadow:  0 0 0 1px var(--wf-disabled-border-color) inset;
      color: var(--wf-disabled-text-color);
      -webkit-text-fill-color:var(--wf-disabled-text-color);
      cursor: not-allowed;
    }
  }
  &.is-prepend{
    >.wf-input_wrapper{
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* 自己添加的 */
  &.wf-input_wrapper{
    background-color: var(--wf-input-bg-color);
    box-shadow:  0 0 0 1px var(--wf-input-border-color) inset;
  }
  &.wf-input_inner{
    outline: none;
    border: none;
    line-height: var(--wf-input-height);
    color: var(--wf-input-text-color);
    -webkit-text-fill-color:var(--wf-input-text-color);
    /* cursor: not-allowed; */
  }
  &.wf-textarea_inner{
    background-color: var(--wf-input-bg-color);
    box-shadow:  0 0 0 1px var(--wf-input-border-color) inset;
    color: var(--wf-input-text-color);
    -webkit-text-fill-color:var(--wf-input-text-color);
    /* cursor: not-allowed; */
  }
}

.wf-input--large{
  --wf-input-height:var(--wf-component-size-large);
  font-size: 14px;
  .wf-input_wrapper{
    padding: 1px 15px;
    .wf-input_inner{
      --vk-input-inner-height:calc(var(--wf-input-height,40px)-2px);
    }
  }
}

.wf-input--small{
  --wf-input-height:var(--wf-component-size-small);
  font-size: 12px;
  .wf-input_wrapper{
    padding: 1px 7px;
    .wf-input_inner{
      --vk-input-inner-height:calc(var(--wf-input-height,24px)-2px);
    }
  }
}

.wf-input_prefix, .wf-input_suffix{
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0;
  flex-wrap: nowrap;
  height: 100%;
  text-align: center;
  color: var(--wf-input-icon-color);
  transition: all var(--wf-transition-duration);
}

.wf-input_prefix{
  >:first-child{
    margin-left: 0px !important;
  }
  >:last-child{
    margin-right: 0px !important;
  }
}

.wf-input_prepend,.wf-input_append{
  background-color: var(--wf-fill-color-light);
  color: var(--wf-color-info);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  border-radius: var(--wf-input-border-radius);
  padding: 0 20px;
  white-space: nowrap;
}

.wf-input_prepend{
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 1px 0 0 0 var(--wf-input-border-color) inset;
}
.wf-input_append{
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 1px 0 0 0 var(--wf-input-border-color) inset;
}
